<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			li {
				list-style: none;
			}

			a {
				text-decoration: none;
			}

			.nav {
				width: 100%;
				height: 50px;
				background-color: #3358ff;
			}

			.heart {
				width: 1200px;
				margin: 0 auto;
			}

			.nav .heart .navOne>li {
				float: left;
				width: 200px;
				height: 50px;
				text-align: center;
				line-height: 50px;
			}

			.nav .heart .navOne>li a {
				color: #fff;
				font-size: 16px;
				position: relative;
			}

			.nav .heart .navOne>li a:hover {
				color: red;
	
			}
			.nav .heart .navOne>li a::after{
				content: "";
				display: block;
				width: 1px;
				height: 10px;
				background-color: #fff;
				position: absolute;
				top: 7px;
				right: -15px;
			}
			.nav .heart .navOne>li .shouye::after{
				display: none;
			}
			.nav .heart .navOne>li .navTwo {
				width: 100%;
				height: 300px;
				background-color: pink;
				position: absolute;
				left: 0;
				display: none;
			}

			.nav .heart .navOne>li:hover .navTwo {
				display: block;
			}
			.nav .heart .navOne>li .navTwo ul li{
				float: left;
				margin-left: 100px
			}
			.nav .heart .navOne>li .navTwo ul li img{
				width: 300px;
				height: 200px;
				margin-top: 30px;
			}
		</style>
	</head>
	<body>
		<div class="nav">
			<div class="heart">
				<ul class="navOne">
					<li>
						<a href="" class="shouye">首页</a>
						<div class="navTwo">
							<ul>
								<li><img src="./img/1.jpg" alt=""></li>
								<li><img src="./img/1.jpg" alt=""></li>
								<li><img src="./img/1.jpg" alt=""></li>
							</ul>
						</div>
					</li>
					<li><a href="">新闻</a>
						<div class="navTwo">
							<ul>
								<li><img src="./img/2.jpg" alt=""></li>
								<li><img src="./img/2.jpg" alt=""></li>
								<li><img src="./img/2.jpg" alt=""></li>
							</ul>
						</div>
					</li>
					<li><a href="">娱乐</a>
						<div class="navTwo">
							<ul>
								<li><img src="./img/3.jpg" alt=""></li>
								<li><img src="./img/3.jpg" alt=""></li>
								<li><img src="./img/3.jpg" alt=""></li>
							</ul>
						</div>
					</li>
					<li><a href="">游戏</a>
						<div class="navTwo">
							<ul>
								<li><img src="./img/4.jpg" alt=""></li>
								<li><img src="./img/4.jpg" alt=""></li>
								<li><img src="./img/4.jpg" alt=""></li>
							</ul>
						</div>
					</li>
					<li><a href="">养生</a>
						<div class="navTwo">
							<ul>
								<li><img src="./img/5.jpg" alt=""></li>
								<li><img src="./img/5.jpg" alt=""></li>
								<li><img src="./img/5.jpg" alt=""></li>
							</ul>
						</div>
					</li>
					<li><a href="">地图</a>
						<div class="navTwo">
							<ul>
								<li><img src="./img/6.jpg" alt=""></li>
								<li><img src="./img/6.jpg" alt=""></li>
								<li><img src="./img/6.jpg" alt=""></li>
							</ul>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</body>
</html>
